<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态时钟</title>
</head>
<script>
    function show() {
        var r = Math.random() * 254;
        var g = Math.random() * 254;
        var b = Math.random() * 254;
        r = Math.ceil(r);
        g = Math.ceil(g);
        b = Math.ceil(b);
        document.getElementById("time").style.color = "rgb(" + r + "," + g + "," + b + ")";
    }

    function fun() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        if (hour < 10) {
            hour = "0" + hour;
        }
        if (month < 10) {
            month = "0" + month;
        }
        if (s < 10) {
            s = "0" + s;
        }
        if (day < 10) {
            day = "0" + day;
        }
        if (min < 10) {
            min = "0" + min;
        }
        var time = year + "年" + month + "月" + day + "日" + hour + ":" + min + ":" + s;
        document.getElementById("time").innerHTML = time;
        show();
        setTimeout(fun, 500);
    }
</script>
<style>
    #con {
        position: absolute;
        top: 50%;
        margin-top: -250px;
        margin-left: -250px;
        left: 50%;
    }

    #time {
        font-size: 20px;
        position: absolute;
        top: 190px;
        left: 80px;
    }
</style>
<body onload="fun()">
<div id="con">
    <img src="./js素材/time.jpg">
    <span id="time"></span>
</div>
</body>
</html>